/**
 * MapGeojson
 */
import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import MapCrumb from '../../../menu/crumb/MapCrumb';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

class MapGeojson extends Component{
    
    constructor(props) {
        super(props);
        this.state = {
            geojson: null
        }
    }

    componentWillMount() {
        fetch("/api/cities")
            .then(response => response.json())
            .then(data => {
                this.setState({ geojson: data.features }, function () {
                    this.loadData();
                });
            }); 
    }

    loadData() {
        return this.state.geojson;
    }

    render() {
        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        <MapCrumb></MapCrumb>
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        <Map style={{ width: '100%', height: '500px' }}
                            ref={m => { this.leafletMap = m; }}
                            center={[20, 0]} zoom={2} zoomControl={true}>
                            <TileLayer attribution='&copy;OpenStreetMap contributors' url="http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}" />
                            {this.state.geojson ? (
                                this.state.geojson.map((city, index) => { 
                                    return (
                                        <Marker key={city.properties.name} position={[city.geometry.coordinates[1], city.geometry.coordinates[0]]}>
                                            <Popup>{city.properties.name}</Popup>
                                        </Marker>
                                    )
                                })
                            ) : "no data" }
                        </Map>
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        );
    }
}
export default MapGeojson;